쿠키와 세션 (with 캐시)
June 03, 2020
쿠키 (Cookie)
- 쿠키는 클라이언트 로컬에 저장되는 키와 값이 들어있는 작은 데이터 파일입니다.
- 사용자 인증이 유효한 시간을 명시할 수 있으며, 유효 시간이 정해지면 브라우저가 종료되어도 인증이 유지되는 특징이 있습니다.
- 쿠키는 클라이언트의 상태 정보를 로컬에 저장했다가 참조합니다.
- 클라이언트에 300개까지 쿠키 저장이 가능하며 하나의 도메인 당 20개의 값만 가질 수 있습니다. 또한 하나의 쿠키값은 4KB까지 저장이 가능합니다.
- Response Header에 Set-Cookie 속성을 사용하면 클라이언트에 쿠키를 만들 수 있습니다.
- 쿠키는 클라이언트에서 요청(Request)할 때 Request Header에 넣어두면 자동으로 서버에 전송됩니다.
쿠키의 구성 요소
이름 (Name)
- 쿠키의 이름
값 (Value)
- 쿠키의 저장된 값
유효시간 (Expires)
- 쿠키가 언제 삭제되는지 결정합니다.
-
ex)
expires="Wdy, DD−Mon−YYYY HH:MM:SS GMT"- Max-Age를 통해 지정된 만료일이 되면 디스크에서 쿠키가 제거됩니다.
도메인 (Domain)
- 쿠키가 사용되는 도메인을 지정합니다.
- ex)
domain=nesoy.github.io - 이 값이 현재 탐색 중인 도메인과 일치하지 않을 경우, “타사 쿠키”로 간주되며 브라우저에서 거부합니다.
- 이렇게 한 도메인에서 다른 도메인에 대한 쿠키를 사용하지 못하게 설정할 수 있습니다.
경로 (Path)
- 쿠키를 반환할 경로를 결정합니다.
-
ex)
path=/- 도메인의 루트 경로로 이동할 경우 쿠키가 전송됩니다.
보안 (Secure)
- 보안 연결 설정합니다.
HttpOnly
- Http외에 다른 통신 사용 가능하게 할지 설정할 수 있습니다.
쿠키의 동작 방식
브라우저(클라이언트)가 페이지를 요청
-
이전에 만들어 둔 쿠키가 없을 경우- 서버에서 새로운 쿠키를 생성 후 HTTP HEADER에 쿠키를 포함시켜서 응답
-
쿠키가 있을 경우- 요청을 할 때 HTTP HEADER에 쿠키를 함께 보냄.
이전 상태 정보를 변경할 필요가 있을 때- 쿠키를 업데이트하여 변경된 쿠키를 HTTP HEADER에 포함시켜 응답
쿠키의 사용 예
- 방문 사이트에서 로그인 시, “아이디와 비밀번호를 저장하시겠습니까?”
- 쇼핑몰의 장바구니 기능
- 자동로그인, 팝업에서 “오늘 더 이상 이 창을 보지 않음” 체크, 쇼핑몰의 장바구니
쿠키의 종류
| 쿠키 이름 | 특징 |
|---|---|
| Session Cookie | 보통 만료시간(Expire date) 설정하고 메모리에만 저장되며 브라우저 종료시 쿠키를 삭제. |
| Persistent Cookie | 장기간 유지되는 쿠키(예를 들어 Max-Age 1년), 파일로 저장되어 브라우저 종료와 관계없이 사용. |
| Secure Cookie | HTTPS에서만 사용, 쿠키 정보가 암호화 되어 전송. |
| Third-Party Cookie | 방문한 도메인과 다른 도메인의 쿠키 보통 광고 베너 등을 관리할 때 유입 경로를 추적하기 위해 사용. |
세션 (Session)
- 쿠키처럼 키와 값을 가진 작은 데이터인데 서버에 저장하고 참조합니다. (이로 인해 쿠키보다는 보안성이 좋습니다.)
- 쿠키와 달리 저장 용량에 대해 제한이 없습니다.
- 세션은 브라우저가 종료될 때 까지 계속 유지됩니다. (유효시간을 설정해도 브라우저가 종료되면 유지X)
- 데이터를 서버에서 저장하고 참조하기 때문에 사용자가 많아질수록 서버에 과부화를 주게 되므로 성능 저하의 요인이 됩니다.
- 브라우저가 서버에 요청을 하게되면 서버는 클라이언트를 구분하기 위해
세션ID라는 유일한 ID를 부여합니다.
세션의 동작 방식
브라우저(클라이언트)가 페이지를 요청
-
브라우저가 서버에 처음 요청한 경우- 세션 ID를 발급받습니다.
- 이때 클라이언트는 세션 ID를 쿠키를 사용해서 저장하게 됩니다.
-
세션 ID가 있는 경우- 서버는 세션 ID를 전달 받아서 별다른 작업없이 세션 ID로 세션에 있는 클라이언트 정보를 가져옵니다.
- 클라이언트 정보를 가지고 서버 요청을 처리하여 클라이언트에게 응답합니다.
세션의 사용 예
- 화면이 이동해도 로그인이 풀리지 않고 로그아웃하기 전까지 유지
쿠키와 세션의 차이
| 쿠키 | 세션 | |
|---|---|---|
| 저장 위치 | 클라이언트(접속자 PC) | 웹서버 |
| 저장 형식 | text | object |
| 만료 형식 (LifeCycle) | 쿠키 저장시 설정 (브라우저가 종료되도, 만료시점이 지나지 않으면 자동삭제되지 않음) | 브라우저 종료시 삭제 (기간 지정 가능) |
| 사용하는 자원 | 클라이언트 자원 | 웹 서버 자원 |
| 용량 제한 | 총 300개 하나의 도메인 당 20개 하나의 쿠키 당 4KB | 서버가 허용하는 한 용량제한 없음. |
| 속도 | 세션보다 빠름 | 쿠키보다 느림 |
| 보안 | 세션보다 안좋음 | 쿠키보다 좋음 |
쿠키와 세션을 사용하는 이유
HTTP프로토콜의 특성상 존재하는 단점을 보완하기 위해 사용합니다.
여기서 말하는 HTTP의 두가지의 특성이란 Connectionless 와 Stateless를 말합니다.
- Connectionless: 클라이언트가 서버로 요청을 보내고, 서버가 클라이언트에게 응답을 하면 접속을 끊는 특성
- Stateless: 접속을 끊는 순간 클라이언트와 서버의 통신은 끝나고 상태 정보를 유지하는 특성
이 특성은 클라이언트와 서버가 통신을 유지하지 않기 때문에 자원의 낭비를 줄일 수 있지만, 회원 정보가 필요한 홈페이지를 이용할 때 페이지 내 서비스를 이용할 때 마다 내가 누구인지 인증을 해야합니다.
예를 들어 네이버 로그인을 한 후 서비스를 이용시 다른 서비스를 이용할 때 로그인 체크를 해야 하는 상황이 발생합니다.
여기서 쿠키와 세션은 HTTP프로토콜을 이용할 때 서버가 클라이언트를 식별할 수 있게 도와주는 역할을 합니다.
캐시 (Cache)
캐시는 웹페이지를 여는데 필요한 자원을 저장하기 위한 임시 저장소입니다. 홈페이지를 접속하면 css, js, 이미지 파일이 사용자의 로컬에 임시로 저장이 되는데 이것이 캐시입니다.
캐시는 같은 홈페이지를 다시 접속하게 되면 css, js, 이미지 파일을 서버가 아닌 사용자의 PC에서 가져오게 됨으로써 페이지 렌더링 속도를 개선해주는 역할을 하고 있습니다.
문제점
홈페이지 관리자가 이미지같은 자원을 변경을 했을 때 사용자의 브라우저에선 변경된 이미지가 적용이 안될 때가 있습니다.
해결 방법
사용자 브라우저의 캐시를 지워주거나, 서버에서 클라이언트로 응답을 보낼 때 header에 캐시 만료시간을 명시해주면 됩니다.
캐시와 쿠키의 차이점
- 사용자의 로컬에 임시로 저장되어 있는 점은 같지만 사용 목적이 다릅니다.
- 캐시는 오직 웹페이지 로딩 속도 개선을 위해서만 사용되지만 쿠키는 사용자 정보에 관련된 여러가지 다른 목적으로 사용 가능합니다.
- 캐시는 오디오, 비디오, 이미지 등의 자원들을 주로 저장하는 반면에 쿠키는 User preference (유저가 웹사이트 접속 시 하는 행동 패턴 또는 관련 정보) 위주의 정보를 저장합니다.
- 쿠키는 웹서버에 접근이 가능하나 캐시는 웹서버에 접근이 불가능합니다.
참조 문서
https://interconnection.tistory.com/74#recentEntries
https://hahahoho5915.tistory.com/32
https://ikso2000.tistory.com/67
